<template>
  <div>
    <header class="game_modal_popularity">人气榜<span v-if="rule_content.title">{{ '（' + rule_content.title + '）' }}</span></header>
    <div v-loading="loading">
      <div class="selection_time gl_clear">
        <div v-if="timeShow === '评选中'" class="gl_fl">评选结束倒计时：还剩</div>
        <div v-if="timeShow === '未开始'" class="gl_fl">评选未开始</div>
        <div v-if="timeShow === '已结束'" class="gl_fl">评选已结束</div>
        <count-time v-if="timeShow === '评选中'" :end-time="endTime" />
        <el-button class="gl_fr" type="text" style="padding:0px" @click="openRules"><span style="color:#dc1d1d;">查看人气榜规则</span></el-button>
      </div>
      <div class="content_list">
        <div style="width:32.5%">
          <div class="mechanism modal_shadow">
            <div class="mechanism_title">最佳人气机构</div>
            <div class="selected">
              <div class="selected_title">最佳人气机构</div>
              <el-input v-model="mechanismName" placeholder="请输入" style="height: 38px;width: 120px" @change="getList('Delegation', false, mechanismName)" />
              <el-button style="background: #31456c;color: #fff;" @click="getList('Delegation', false, mechanismName)">查询</el-button>
            </div>
            <el-table v-loading="DelegationLoading" size="mini" :data="tableDataMechanism" class="gl_table_noBorder" style="margin:0px 12px;">
              <el-table-column label="排名" align="center" :width="65">
                <template slot-scope="{ row }">
                  <div v-if="row.rank === 1" class="allNumber numberOne">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 2" class="allNumber numberTwo">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 3" class="allNumber numberThree">{{ row.rank }}</div>
                  <div v-else class="allNumber">{{ row.rank }}</div>
                </template>
              </el-table-column>
              <el-table-column label="队伍名称">
                <template slot-scope="{ row }">
                  <div class="gl_clear fl_fs_16">
                    <img class="gl_fl table_photo" :src="getStaticFileUrl(row.imagePath)">
                    <div class="gl_fl hot_content">
                      <p class="popu_mb">
                        <span class="hot_content_title">热度：</span>
                        <span class="hot_content_number">{{ row.heat }}</span>
                      </p>
                      <p class="gl_fl hot_content_mechanusm popu_mt">{{ row.name }}</p>
                    </div>
                    <div class="icon_outer"><span class="iconfont icon_dianzan" @click="clickHeat(row, 'Delegation')" /></div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="totalMechanism !== tableDataMechanism.length" class="selectedMore">
            <div style="display:inline-block;cursor:pointer;" @click="getList('Delegation',currentMechanism + 10)">
              更多<span class="iconfont icon_gengduo" />
            </div>
          </div>
        </div>
        <div style="width:32.5%">
          <div class="coach modal_shadow">
            <div class="coach_title">最佳人气教练员</div>
            <div class="selected">
              <div class="selected_title">最佳人气教练员</div>
              <el-input v-model="coachName" placeholder="请输入" style="height: 38px;width: 120px" @change="getList('Coach', false, coachName)" />
              <el-button style="background: #31456c;color: #fff;" @click="getList('Coach', false, coachName)">查询</el-button>
            </div>
            <el-table v-loading="CoachLoading" size="mini" :data="tableDataCoach" class="gl_table_noBorder" style="margin:0px 12px;">
              <el-table-column label="排名" align="center" :width="65">
                <template slot-scope="{ row }">
                  <div v-if="row.rank === 1" class="allNumber numberOne">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 2" class="allNumber numberTwo">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 3" class="allNumber numberThree">{{ row.rank }}</div>
                  <div v-else class="allNumber">{{ row.rank }}</div>
                </template>
              </el-table-column>
              <el-table-column label="队伍名称">
                <template slot-scope="{ row }">
                  <div class="gl_clear fl_fs_16">
                    <img class="gl_fl table_photo" :src="getStaticFileUrl(row.imagePath)">
                    <div class="gl_fl hot_content">
                      <p class="popu_mb">
                        <span class="hot_content_title">热度：</span>
                        <span class="hot_content_number">{{ row.heat }}</span>
                      </p>
                      <p class="gl_fl hot_content_mechanusm popu_mt">{{ row.name }}</p>
                    </div>
                    <div class="icon_outer"><span class="iconfont icon_dianzan gl_fs_12" @click="clickHeat(row, 'Coach')" /></div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="totalCoach !== tableDataCoach.length" class="selectedMore">
            <div style="display:inline-block;cursor:pointer;" @click="getList('Coach', currentCoach + 10)">
              更多<span class="iconfont icon_gengduo" />
            </div>
          </div>
        </div>
        <div style="width:32.5%">
          <div class="athlete modal_shadow">
            <div class="athlete_title">最佳人气运动员</div>
            <div class="selected">
              <div class="selected_title">最佳人气运动员</div>
              <el-input v-model="athleteName" placeholder="请输入" style="height: 38px;width: 120px" @change="getList('Athlete', false, athleteName)" />
              <el-button style="background: #31456c;color: #fff;" @click="getList('Athlete', false, athleteName)">查询</el-button>
            </div>
            <el-table v-loading="AthleteLoading" size="mini" :data="tableDataAthlete" class="gl_table_noBorder" style="margin:0px 12px;boder:none;">
              <el-table-column label="排名" align="center" :width="65">
                <template slot-scope="{ row }">
                  <div v-if="row.rank === 1" class="allNumber numberOne">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 2" class="allNumber numberTwo">{{ row.rank }}</div>
                  <div v-else-if="row.rank === 3" class="allNumber numberThree">{{ row.rank }}</div>
                  <div v-else class="allNumber">{{ row.rank }}</div>
                </template>
              </el-table-column>
              <el-table-column label="队伍名称">
                <template slot-scope="{ row }">
                  <div class="gl_clear fl_fs_16">
                    <img class="gl_fl table_photo" :src="getStaticFileUrl(row.imagePath)">
                    <div class="gl_fl hot_content">
                      <p class="popu_mb">
                        <span class="hot_content_title">热度：</span>
                        <span class="hot_content_number">{{ row.heat }}</span>
                      </p>
                      <p class="gl_fl hot_content_mechanusm popu_mt">{{ row.name }}</p>
                    </div>
                    <div class="icon_outer"><span class="iconfont icon_dianzan" @click="clickHeat(row, 'Athlete')" /></div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="totalAthlete !== tableDataAthlete.length" class="selectedMore">
            <div style="display:inline-block;cursor:pointer;" @click="getList('Athlete', currentAthlete + 10)">
              更多<span class="iconfont icon_gengduo" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="增加热度"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="590px"
      class="gl_dialog_TitleLine gl_dl_footer"
    >
      <el-row :gutter="20" class="gl_px_15 gl_pb_20 currentInfo" type="flex">
        <el-col :span="3">
          <img class="gl_fl table_photo" :src="getStaticFileUrl(currentInfo.imagePath)">
        </el-col>
        <el-col :span="13" class="gl_mt_5">
          <div class="gl_fl hot_content">
            <p class="hot_content_mechanusm">{{ currentInfo.name }}</p>
            <p v-if="currentInfo.rank !==1" class="differenceHeat" style="colcr:#DE1C1C;">距离上一名还差{{ currentInfo.differenceHeat }}点热度</p>
          </div>
        </el-col>
        <el-col :span="4" class="gl_mt_5">
          <p class="gl_fs_14 rank"><span style="width:40px;color:#828282;">排名：</span><span style="color:#353434;">{{ currentInfo.rank }}</span></p>
        </el-col>
        <el-col :span="4" class="gl_mt_5">
          <p class="gl_fs_14"><span style="width:40px;color:#828282;">热度：</span><span style="color:#353434;">{{ currentInfo.heat }}</span></p>
        </el-col>
      </el-row>
      <div v-loading="dialogLoading">
        <div class="gl_padding_15 gl_pb_20" style="border-bottom:1px solid #e8e8e8;">
          <el-row>
            <p class="gl_fs_16 fl_mb_15">礼品</p>
            <div v-if="giftList.length > 8" style="max-height:260px">
              <el-scrollbar wrap-class="scrollbar-wrapper gl_dialog_height" style="height:260px">
                <div class="giftcontent" style="padding-bottom: 60px;">
                  <div v-for="(item, index) in giftList" :key="item.id" class="oneGift">
                    <el-popover placement="top-start" trigger="hover">
                      <div class="bullet gl_clear">
                        <img class="imgBullet gl_mr_15" :src="getStaticFileUrl(item.giftUrl)">
                        <div class="content">
                          <p class="name">{{ item.name }}</p>
                          <p>每赠送一个{{ item.name }}可以增加{{ item.heat }}热度，每个{{ item.name }}价值{{ item.price / 100 }}元</p>
                        </div>
                      </div>
                      <div slot="reference" :class="selectedOne === index ? 'giftimgSelected' : 'giftimg'">
                        <img
                          class="table_giftphoto"
                          :src="getStaticFileUrl(item.giftUrl)"
                          @click="getGiftId(index)"
                        >
                      </div>
                    </el-popover>
                    <p class="price">{{ item.price / 100 }}元</p>
                    <p class="heat">{{ item.heat }}热度</p>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div v-else class="giftcontent" style="max-height:260px">
              <div v-for="(item, index) in giftList" :key="item.id" class="oneGift">
                <el-popover placement="top-start" trigger="hover">
                  <div class="bullet gl_clear">
                    <img class="imgBullet gl_mr_15" :src="getStaticFileUrl(item.giftUrl)">
                    <div class="content">
                      <p class="name">{{ item.name }}</p>
                      <p>每赠送一个{{ item.name }}可以增加{{ item.heat }}热度，每个{{ item.name }}价值{{ item.price / 100 }}元</p>
                    </div>
                  </div>
                  <div slot="reference" :class="selectedOne === index ? 'giftimgSelected' : 'giftimg'">
                    <img
                      class="table_giftphoto"
                      :src="getStaticFileUrl(item.giftUrl)"
                      @click="getGiftId(index)"
                    >
                  </div>
                </el-popover>
                <p class="price">{{ item.price / 100 }}元</p>
                <p class="heat">{{ item.heat }}热度</p>
              </div>
            </div>
          </el-row>
          <el-row class="gl_mt_10">
            <el-col :span="2" class="gl_fs_16 gl_mr_15" style="height:40px;line-height:40px">数量</el-col>
            <el-col :span="8"><el-input-number v-model="submitOrder.count" label="描述文字" :min="1" :max="9999" @change="countChange" /></el-col>
          </el-row>
        </div>
        <div class="totalPrice">需要支付：<span class="price">{{ totalPrice }}元</span></div>
      </div>
      <form id="form" ref="form" action="https://unipay.ydfuture.com/api/v1/trade/cashDesk" method="post" style="display:none">
        <input ref="pay_params" type="text" name="pay_params" value="">
        <button type="submit">提交</button>
      </form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="buLoading" size="medium" type="primary" @click="confirmDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="rule_content.title"
      :visible.sync="ruledialogVisible"
      :close-on-click-modal="false"
      width="650px"
      class="gl_dialog_TitleLine gl_dl_footer"
    >
      <div v-loading="ruleLoading" class="gl_px_20 gl_pb_20 rule_content">
        <el-scrollbar wrap-class="scrollbar-wrapper gl_dialog_height" style="height:400px">
          <div ref="rule_content" class="giftcontent" style="padding-bottom: 50px;" />
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import countTime from '@/components/TimeFinish/index.vue';
import {
  api_GET_EventsManagementPopularity,
  api_GET_EventsManagementGift,
  api_POST_EventsManagementPopularitySubmitOrder,
  api_GET_EventsManagementCompetitionId,
  api_GET_EventsManagementVotingRegulationVotingRegulation,
  api_GET_EventsManagementPopularityIdDifferenceHeat
} from '@/extend/api/gameswaggerApi/app';
import {
  Api_GET_EventsManagementPopularityQO,
  Api_GET_EventsManagementGiftQO,
  SiSTKWEventsManagementCreateGiftOrderDto,
  Api_GET_EventsManagementCompetitionIdQO
} from '@/lib/form/game/swaggerForm';
import {
  api_GET_TradePayOrderParameter // 获取支付订单的参数
} from '@/extend/api/swaggerApi/app';
import {
  Api_GET_TradePayOrderParameterQO
} from '@/lib/form/swaggerForm';
export default {
  components: { countTime },
  data () {
    return {
      tableDataMechanism: [],
      tableDataCoach: [],
      tableDataAthlete: [],
      totalAthlete: 0,
      totalMechanism: 0,
      totalCoach: 0,
      currentAthlete: 0,
      currentMechanism: 0,
      currentCoach: 0,
      athleteName: '',
      mechanismName: '',
      coachName: '',
      gameId: '',
      loading: false,
      dialogVisible: false,
      ruledialogVisible: false,
      DelegationLoading: false,
      AthleteLoading: false,
      CoachLoading: false,
      ruleLoading: false,
      currentInfo: {},
      giftQO: new Api_GET_EventsManagementGiftQO(),
      giftList: [],
      selectedOne: 0,
      submitOrder: new SiSTKWEventsManagementCreateGiftOrderDto(),
      totalPrice: 0,
      dialogLoading: false,
      orderParameterQO: new Api_GET_TradePayOrderParameterQO(),
      routeList: '',
      gameInfo: new Api_GET_EventsManagementCompetitionIdQO(),
      endTime: '',
      startTime: '',
      timeShow: '',
      selectedType: '',
      rule_content: [],
      buLoading: false
    };
  },
  computed: {
    ...mapState({
      info: state => state.user.info
    })
  },
  watch: {
    'info': {
      immediate: true,
      deep: true,
      handler(val) {
      }
    }
  },
  created() {
    this.routeList = this.$route.fullPath;
    this.gameId = this.$route.query.id;
    this.getGameInfo();
    this.getList('Athlete');
    this.getList('Delegation');
    this.getList('Coach');
    this.getRules();
  },
  updated() {
    this.routeList = this.$route.fullPath;
    this.gameId = this.$route.query.id;
  },
  methods: {
    getList(PopularityType, MaxResultCount, Filter) {
      const selectedMsg = new Api_GET_EventsManagementPopularityQO();
      selectedMsg.MaxResultCount = MaxResultCount || 10;
      selectedMsg.Filter = Filter || '';
      selectedMsg.CompetitionId = this.gameId;
      selectedMsg.PopularityTypeCode = PopularityType;
      const load = MaxResultCount === undefined && Filter === undefined ? 'loading' : PopularityType + 'Loading';
      const that = this;
      that.$set(that, load, true);
      api_GET_EventsManagementPopularity(selectedMsg).then(res => {
        that.$set(that, load, false);
        if (selectedMsg.PopularityTypeCode === 'Athlete') {
          this.tableDataAthlete = res.items;
          this.totalAthlete = res.totalCount;
          this.currentAthlete = selectedMsg.MaxResultCount;
        } else if (selectedMsg.PopularityTypeCode === 'Delegation') {
          this.tableDataMechanism = res.items;
          this.totalMechanism = res.totalCount;
          this.currentMechanism = selectedMsg.MaxResultCount;
        } else {
          this.tableDataCoach = res.items;
          this.totalCoach = res.totalCount;
          this.currentCoach = this.currentCoach <= res.totalCount ? selectedMsg.MaxResultCount : res.totalCount;
        }
      }, error => {
        that.$set(that, load, false);
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取赛事信息 投票时间范围
    getGameInfo() {
      api_GET_EventsManagementCompetitionId(this.gameId, this.gameInfo).then(res => {
        if (res) {
          this.endTime = res.endTime.substring(0, 19).replace('T', ' ');
          this.startTime = res.startTime.substring(0, 19).replace('T', ' ');
          console.log(res, '赛事信息');
          if (res.isPublished === false) {
            this.timeShow = '未开始';
            return;
          }
          if (new Date(this.endTime).getTime() < new Date().getTime()) {
            this.timeShow = '已结束';
            return;
          }
          this.timeShow = '评选中';
        }
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取礼物列表
    getGiftList() {
      this.dialogLoading = true;
      this.giftQO.MaxResultCount = 999;
      api_GET_EventsManagementGift(this.giftQO).then(res => {
        this.giftList = res.items || [];
        this.dialogLoading = false;
        // this.$set(this.submitOrder, 'price', this.giftList[0].price);
        this.submitOrder.count = 1;
        this.selectedOne = 0;
        this.submitOrder.giftId = this.giftList[0].id;
        this.totalPrice = this.giftList[this.selectedOne].price * this.submitOrder.count / 100;
      }, error => {
        this.dialogLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取与上一名相差的热度
    getHeatDifference(id, type) {
      api_GET_EventsManagementPopularityIdDifferenceHeat(id, { CompetitonId: this.gameId, PopularityTypeCode: type }).then(res => {
        this.currentInfo.differenceHeat = res.differenceHeat;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 点击添加热度
    clickHeat(row, type) {
      if (!this.info) {
        // this.$message({ type: 'warning', message: '请登录后再进行点赞' });
        this.$router.push({
          name: 'login',
          query: this.$route.query,
          params: this.$route.params
        });
        return;
      }
      if (this.timeShow !== '评选中') {
        this.$message({ type: 'warning', message: '未在评选时间内' });
        return;
      }
      this.submitOrder.popularityTypeCode = type;
      this.submitOrder.recipientId = row.id;
      this.selectedOne = 0;
      this.submitOrder.count = 1;
      this.currentInfo = row;
      this.getGiftList();
      this.getHeatDifference(row.id, type);
      this.dialogVisible = true;
      this.selectedType = type;
    },
    // 点击提交订单
    confirmDialog() {
      const that = this;
      that.buLoading = true;
      this.submitOrder.competitionId = this.gameId;
      if (this.submitOrder.competitionId === '' || this.submitOrder.giftId === '') return;
      this.dialogLoading = true;
      api_POST_EventsManagementPopularitySubmitOrder(this.submitOrder).then(res => {
        that.buLoading = false;
        this.dialogLoading = false;
        if (res && res.orderNo) {
          this.payment(res.orderNo);
        }
      }, error => {
        that.buLoading = false;
        this.dialogLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 去支付
    payment(orderNo) {
      if (orderNo) {
        const _origin = window.location.origin;
        const _pathname = '/game';
        const _orderUrl = '#' + this.routeList + '&';
        const url = _origin + _pathname + _orderUrl;
        this.orderParameterQO.OrderNo = orderNo;
        this.orderParameterQO.ReturnUrl = url; // 支付成功后跳转的地址
        api_GET_TradePayOrderParameter(this.orderParameterQO)
          .then(res => {
            this.$refs.pay_params.value = res.parameter.replace(/\s*/g, '');
            this.$refs.form.submit();
            this.getList(this.selectedType);
          });
      }
    },
    // 获取礼物ID
    getGiftId(index) {
      this.selectedOne = index;
      this.submitOrder.giftId = this.giftList[index].id;
      this.totalPrice = this.giftList[index].price * this.submitOrder.count / 100;
    },
    // 数量改变时
    countChange(val) {
      this.submitOrder.count = val;
      this.totalPrice = this.giftList[this.selectedOne].price * val / 100;
    },
    // 获取静态图片
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      }
    },
    // 获取人气榜规则
    getRules() {
      api_GET_EventsManagementVotingRegulationVotingRegulation().then(res => {
        if (res) {
          this.ruleLoading = false;
          this.$set(this.rule_content, 'title', res.title);
          this.$set(this.rule_content, 'content', res.content);
        }
      }, error => {
        this.ruleLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 打开规则详情
    openRules() {
      this.ruledialogVisible = true;
      this.ruleLoading = true;
      api_GET_EventsManagementVotingRegulationVotingRegulation().then(res => {
        if (res) {
          this.ruleLoading = false;
          this.$set(this.rule_content, 'title', res.title);
          this.$set(this.rule_content, 'content', res.content);
          this.$refs.rule_content.innerHTML = this.rule_content.content;
        }
      }, error => {
        this.ruleLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>
<style lang="scss">
  .wscnph {
    max-width: 550px;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
<style lang="scss" scoped>
  .popu_mb {
    margin-bottom: 0px;
  }
  .popu_mt {
    margin-top: 0px;
  }
  .game_modal_popularity {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding-left: 20px;
    margin-bottom: 14px;
    line-height: 40px;
    color: #353434;
    font-weight: bold;
    font-size: 20px;
  }
  .game_modal_popularity::after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 40px;
    background-color: #E02020;
    border-radius: 4px;
    content: "";
  }
  .selection_time {
    padding: 0px 20px;
    color: #dc1d1d;
    font-weight: bold;
    font-size: 14px;
  }
  .content_list {
    padding: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;

  }
  .mechanism, .coach, .athlete {
    width: 100%;
    height: auto;
    background: #ccc;
    border-radius: 20px 20px 8px 8px;
    overflow: hidden;
  }
  .modal_shadow {
    background: #ffffff;
    padding-bottom: 10px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
  }
  .mechanism_title {
    background: url('../../../assets/images/mechanism_listbg.png') no-repeat;
  }
  .coach_title {
    background: url('../../../assets/images/coach_listbg.png') no-repeat;
  }
  .athlete_title {
    background: url('../../../assets/images/athlete_listbg.png') no-repeat;
  }
  .mechanism_title, .coach_title, .athlete_title {
    height: 58px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 58px;
    color: white;
    background-size: 100% 100%;
  }
  .selected {
    display: -webkit-flex;
    margin: 12px 20px 12px 12px;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 14px;
    line-height: 40px;
  }
  .selected_title {
    color: #353434;
  }
  .table_photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #d90c00;
  }
  .hot_content {
    width: 168px;
    margin-left: 12px;
  }
  .hot_content_title {
    font-size: 14px;
    font-weight: 400;
    text-align: LEFT;
    color: #828282;
  }
  .hot_content_number {
    font-size: 20px;
    font-weight: 700;
    color: #de1c1c;
  }
  .hot_content_mechanusm {
    font-size: 14px;
    font-weight: 400;
    color: #353434;
  }
  .allNumber {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #353434;
    width: 55px;
    height: 42px;
    line-height: 42px;
  }
  .numberOne {
    color: white;
    background: url('../../../assets/images/number_one.png') no-repeat;
    background-size: 38px 42px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .numberTwo {
    color: white;
    background: url('../../../assets/images/number_two.png') no-repeat;
    background-size: 38px 42px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .numberThree {
    color: white;
    background: url('../../../assets/images/number_three.png') no-repeat;
    background-size: 38px 42px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .icon_outer {
    height: 60px;
    line-height: 60px;
  }
  .icon_dianzan {
    display: inline-block;
    color: #DE1C1C;
    font-size: 18px;
    line-height: 60pxs;
  }
  .el-table {
    border-top: none;
    border-left: none;
    border-right: none !important;
    border-bottom: none;
    width: 94%;
    min-height: 768px;
  }
  .el-table th {
  border-right: none;
  }
  .el-table__header td, .el-table td {
    border-right: none;
  }
  .el-table::before {
    height: 0px;
  }
  .selectedMore {
    font-size: 12px;
    color: #D01528;
    text-align: right;
    margin-top: 20px;
  }
  .currentInfo {
    display: flex;
    border-bottom: 1px solid #E8E8E8;
  }
  .rank {
    border-right: 1px solid rgba(0,0,0,0.09);
  }
  .differenceHeat {
    font-size: 12px;
    color: #DE1C1C;
    margin-top: 8px;
  }
  .giftcontent {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .oneGift {
    width: 85px;
    height: 130px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    .table_giftphoto {
      width: 65px;
      height: 65px;
      // border: 1px solid rgba(0,0,0,0.15);
      border-radius: 4px;
      margin-top: 7px;
    }
    .table_giftselected {
      width: 65px;
      height: 65px;
      // border: 1px solid #D01528;
      border-radius: 4px;
    }
    .price {
      height: 20px;
      color: #E02A2A;
      margin: 0px;
    }
    .heat {
      height: 20px;
      color: #353434;
      margin: 0px;
    }
    .giftimg {
      display: inline-block;
      width: 85px;
      height: 85px;
      text-align: center;
    }
    .giftimgSelected {
      display: inline-block;
      width: 85px;
      height: 85px;
      border: 2px solid #D01528;
      border-radius: 4px;
    }
  }
  .totalPrice {
    margin: 40px 15px;
    font-size: 16px;
  .price {
    color: #E02A2A;
  }
  }
  .rule_content {
    font-size: 14px;
    line-height: 25px;
  }
  .bullet {
    .imgBullet {
      float: left;
      width: 40px;
      height: 40px;
    }
    .content {
      float: left;
      line-height: 20px;
      font-size: 12px;
      p {
        padding: 0px;
        margin: 0px;
      }
      .name {
        font-weight: bold;
      }
    }
  }
</style>
